<template>
  <footer class="footer">
    <span class="todo-count"
      >剩余<strong>{{ RemainingQuantity }}</strong></span
    >
    <ul class="filters">
      <!-- 这个是简写的方法 就是之前的方法的简写  -->
      <!-- 原理一样的 向父组件名叫changeType的一个自定义函数传一个实参  -->
      <!-- 动态绑定class属性里面的selected属性  当 type === 'all'的时候显示 -->
      <li>
        <a @click="$emit('changeType','all')" :class="{ selected: type === 'all' }" href="javascript:;">全部</a>
      </li>
      <li>
        <a @click="$emit('changeType','no')" :class="{ selected: type === 'no' }" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="$emit('changeType','yes')" :class="{ selected: type === 'yes' }" href="javascript:;">已完成</a>
      </li>
    </ul>
    <button class="clear-completed" v-show="isShowClear" @click="clear">
      清除已完成
    </button>
  </footer>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
    },
    //
    type: {
      type: String,
      required: true,
    },
  },
  //
  computed: {
    // 计算属性里面如果调用方法的话 按照属性来使用 所以不用加（）
    RemainingQuantity() {
      // 留下满足条件的  不满足条件的不要
      return this.list.filter((item) => item.isDone === false).length
    },
    //
    isShowClear() {
      // v-show  值为布尔值 所以这个方法要返回一个布尔值
      // 而js中返回布尔值的方法很少 我们查阅资料发现能用some方法
      // 遍历并且检查数组 返回值是布尔值 只要有一个满足条件 就返回true  不然就返回false
      // 检查数组里的每一项的isDone属性是不是为true

      return this.list.some((item) => item.isDone === true)
    },
  },
  //
  methods: {
    // 添加了一个点击事件  并且在子组件methods储存方法
    clear() {
      this.$emit('clear')
    },
  },
}
</script>
